<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="__PUBLIC__/dataapi/css/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="__PUBLIC__/dataapi/css/themes/color.css">
    <link rel="stylesheet" href="__PUBLIC__/dataapi/css/themes/icon.css">
    <link rel="stylesheet" href="__PUBLIC__/dataapi/css/themes/mobile.css">
    <script src="__PUBLIC__/dataapi/js/jquery.min.js"></script>
    <script src="__PUBLIC__/dataapi/js/jquery.easyui.min.js"></script>
    <script src="__PUBLIC__/dataapi/js/easyloader.js"></script>
</head>
<style>
    ul{
        width: 300px;
        list-style: none;
        padding: 0px;
    }
    ul li{
        width: 100%;
        padding: 0px;
    }
    ul li a{
             float: left;
             width: 50%;
             margin: 0 10% 0 0;
             text-align: center;
             text-decoration: none;
         }
    ul li form{
        float: left;
        width: 40%;
        margin: 0px;
        padding: 0px;
    }
    ul li form button{
        float: left;
        width: 100%;
        margin: 0px;
        text-align: center;
        text-decoration: none;
    }
</style>
<body>

<body class="easyui-layout">
<div data-options="region:'east',iconCls:'icon-reload',title:'已更新批次列表',split:true" style="width:500px;"><table id="dg1"></table></div>
<div data-options="region:'west',title:'未更新批次列表',split:true" style="width:500px;"> <table id="dg0"></table></div>
<div data-options="region:'center',title:'操作提示'" style="padding:5px;background:#eee;">
    <div id="pageAll">
        <div class="pageTop">
            <div class="page">
                <img src="__PUBLIC__/dataapi/img/coin02.png" /><span><a href="#">首页</a>&nbsp;-&nbsp;<a
                    href="#">导入管理</a>&nbsp;-</span>&nbsp;表格导入
            </div>
        </div>
        <a href="__URL__/downloadMould">下载模板表格</a>
        <form action="__URL__/upload" enctype="multipart/form-data" method="post" >
            批次<input type="text" name="batch" placeholder="请输入批次，默认时间批次，精确到秒"/>
            <input type="file" name="excel" />
            <input type="submit" value="提交" >
        </form>
    </div>
</div>
</body>

    <!--<div>-->
        <!--<ul>-->
            <!--<foreach name = 'batches' item = 'batch' >-->
                <!--<foreach name = 'batch' item = 'value'>-->
                    <!--<li><a href="__URL__/mybatch?batch={$value}">{$value}</a>-->
                        <!--<form action="{:U('DataAPI/index/syncmybatch',array('batch'=>$value))}" method="POST"><button>同步该批次</button></form></li>-->
                <!--</foreach>-->
            <!--</foreach>-->
        <!--</ul>-->
    <!--</div>-->
<!--</div>-->


    <div style="width: 100%;height: 300px"></div>

<script>
    $(function () {
        function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){	// is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage:function(pageNum, pageSize){
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh',{
                        pageNumber:pageNum,
                        pageSize:pageSize
                    });
                    dg.datagrid('loadData',data);
                }
            });
            if (!data.originalRows){
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }
        //     初始化未更新批次
        var data = <?php echo json_encode($arr['batches'])?>;

        for(var i=0;i<data.length;i++){
            data[i].abatch = '<a href="__URL__/mybatch?batch='+data[i].batch+'">'+data[i].batch+'</a>';
             data[i].button = '<form action="__URL__/syncmybatch?batch='+data[i].batch+'" method="post"><a id="btn"'+data[i].batch+' href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-add\'">更新</a></form>';
        };
        $('#dg0').datagrid({
            columns:[[
                {field:'abatch',title:'未更新批次',width:200},
                {field:'createdtime',title:'上传时间',width:200},
                {field:'button',title:'点击更新',width:200},
            ]],
            data:data,
            rownumbers:true,
            fitColumns:true,
            striped:true,
            nowrap:true,
            pagination:true,
            pagePosition:'bottom',
            pageNumber:1,
            pageSize:10,
            showFooter:true,
        });
        $('#dg0').datagrid({loadFilter:pagerFilter});
//     初始化已更新批次
        var sync = <?php echo json_encode($arr['sync'])?>;
        for(var i=0;i<sync.length;i++){
            sync[i].batch = '<a href="__URL__/mybatch?batch='+sync[i].batch+'">'+sync[i].batch+'</a>';
        };
        $('#dg1').datagrid({
            columns:[[
                {field:'batch',title:'已更新批次',width:200},
                {field:'createdtime',title:'上传时间',width:200},
                {field:'synctime',title:'同步时间',width:200}
            ]],
            data:sync,
            rownumbers:true,
            fitColumns:true,
            striped:true,
            nowrap:true,
            pagination:true,
            pagePosition:'bottom',
            pageNumber:1,
            pageSize:10,
            showFooter:true,
        });
        $('#dg1').datagrid({loadFilter:pagerFilter});
            $('#btn').bind('click', function(){
                $('#btn').linkbutton('disable');
            });
    })
</script>
</body>
</html>